<template>
  <span>
    <span :class="css[arr[index]]">{{index + 1}}: {{msg[arr[index]]}}</span>
  </span>
</template>

<script>
export default {
  name: 'FlagCom',
  props: ['arr', 'index'],
  data () {
    return {
      msg: { 0: '未完成', 1: '正确', 2: '错误' },
      css: { 0: 'undo', 1: 'right', 2: 'error' }
    }
  }
}
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>
